<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/style.css" type="text/css"/>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/normalize.css" type="text/css"/>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/reset.css" type="text/css"/>
        <title>Category</title>
        <!-- include jQuery + carouFredSel plugin -->
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/idangerous.swiper.css">
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/style.css?v=1.8">
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/swiper-demos.css?v=1.8">
        <script  src="<%=request.getContextPath()%>/products/js/libs/jquery-1.7.1.min.js"></script>
        <!-- Swiper -->
        <script  src="<%=request.getContextPath()%>/products/js/idangerous.swiper-1.9.1.min.js"></script>
        <!-- Swiper Scrollbar plugin -->
        <script  src="<%=request.getContextPath()%>/products/js/idangerous.swiper.scrollbar-1.2.js"></script>
        <!-- Demos code -->
        <script  src="<%=request.getContextPath()%>/products/js/swiper-demos.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script  src="<%=request.getContextPath()%>/products/js/idangerous.swiper-1.9.1.min.js"></script>
        <!-- Swiper Scrollbar plugin -->
        <script  src="<%=request.getContextPath()%>/products/js/idangerous.swiper.scrollbar-1.2.js"></script>
        <script type="text/javascript">
            /*======
             Use document ready or window load events
             For example:
             With jQuery: $(function() { ...code here... })
             Or window.onload = function() { ...code here ...}
             Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
             ======*/

            var swiper = new Swiper('.swiper1', {
                pagination: '.pagination1',
                loop: true,
                speed: 1200,
                moveStartThreshold: 100,
                grabCursor: true
            });
            $('.arrow-left').click(function(e) {
        e.preventDefault()
        swiper.swipePrev()
    });
    $('.arrow-right').click(function(e) {
        e.preventDefault()
        swiper.swipeNext()


    });



    
        </script>
        <script>
            $(function() {
                //  Do whatever in here that happens every 3 seconds
                
                $.post("/cfr/products/start_person.jsp", {name: "John", time: "2pm"});
            });
        </script>
    </head>
    <body>
<!--        <script language=JavaScript>
            
            var message = "Function Disabled!";

            ///////////////////////////////////
            function clickIE4() {
                if (event.button == 2) {
                    alert(message);
                    return false;
                }
            }

            function clickNS4(e) {
                if (document.layers || document.getElementById && !document.all) {
                    if (e.which == 2 || e.which == 3) {
                        alert(message);
                        return false;
                    }
                }
            }

            if (document.layers) {
                document.captureEvents(Event.MOUSEDOWN);
                document.onmousedown = clickNS4;
            }
            else if (document.all && !document.getElementById) {
                document.onmousedown = clickIE4;
            }

            document.oncontextmenu = new Function("return false")

            //  
        </script>-->
        <div id="wrapper">
            <div id="header">
                <div class="container">

                    <div id="byAmfi"><h1>by AMFI</h1></div>

                    <div id="back">
                        <a href="javascript:javascript:history.go(-1)"></a>
                    </div>

                    <div id="home">
                        <a href="<%=request.getContextPath()%>"></a>
                    </div>

                </div><!-- container close -->
            </div> <!-- header close -->

            <div id="main">
<!--                <a class="arrow-left category_left" href="#"></a> <a class="arrow-right category_right" href="#"></a>-->
                <h1>What category would you like to see?</h1>
                <div id="category_pager"></div>
                <c:choose>
                    <c:when test="${amountOfCategories != 0}">
                        <div id="categoryslider"> 
                            <div class="swiper-container swiper1">
                                <div class="swiper-wrapper">
                                    <c:forEach var="tempCategory" items="${categoryList}">
                                        <div class="swiper-slide"> 
                                            <a href="<%=request.getContextPath()%>/products?categoryid=${tempCategory.category_id}"><h3> ${tempCategory.category_name}</h3>

                                                <img src="<%=request.getContextPath()%>/category/uploads/${tempCategory.category_image}"/></a>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                            <div class="pagination pagination1"></div>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="errormessage">
                            <h1>Whoops!</h1>
                            <p>No categories found.</p>
                        </div>

                    </c:otherwise>
                </c:choose>

            </div>

            <div id="footer">
                <div class="container">
                    <div id="logo_footer"></div>
                </div><!-- container close -->
            </div><!-- footer close -->
        </div><!-- total wrapper close -->
    </body>
</html>
